<template>
	<view>
		<input  type="text" class="new-nickname" @input="inputHandle" focus  v-model="nickname" placeholder="请输入新名称" />
		<view class="save-btn" @click="updateNickname">
			保存
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				nickname: '',
			};
		},
		onShow() {
		},
		methods: {
			// ...mapMutations('m_user',['updateUserInfo'])
			// 搜索框发生变化时触发
			inputHandle(e) {
				// 事件触发以后，清除上一次的定时器
				clearTimeout(this.timerId)
			
				// 重新启动一个定时器获取用户输入的最后一个关键字
				this.timerId = setTimeout(() => {
					this.nickname =e.detail.value
					console.log(e.detail.value)
					// this.getSearchList()
				}, 500)
			},
			async updateNickname() {
				if(this.nickname!==''){
					const {
						data: res
					} = await uni.$http.post('/user/updateUserBase', {
						userId: this.userInfo._id,
						nickname: this.nickname
					})
					console.log(res)
					if (res.success == '0') {
						uni.navigateBack({
							delta: 0
						})
						uni.$showMsg('昵称更新成功!')
						// this.updateUserInfo()
						this.userInfo.nickname=this.nickname
					}
				}else{
					uni.$showMsg('请输入昵称')
				}
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.new-nickname {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #999999;
		padding-left: 49rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #DCDCDC;
		border-bottom: 1rpx solid #DCDCDC;

		::placeholder {
			font-size: 36rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.save-btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 702rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background: #D80E0E;
		border-radius: 10px;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>
r
